<template>
    <!-- 左侧 头像、性别、昵称 -->
    <div class="member-detail-left line-right flex-items-box pr-16 flex-col justify-center">
        <el-image :src="memberDetail.userAvatar" fit="cover" />
        <div class="mt-20 flex-items-box">
            <Icon
                :size="18"
                :name="memberDetail.gender ? 'Female' : 'Male'"
                :style="{
                    color: memberDetail.gender ? '#A3D0E9' : '#E6779F'
                }"
            />
            <!-- 会员昵称 -->
            <template v-if="memberDetail.username.length > 5">
                <el-tooltip effect="dark" :content="memberDetail.username" placement="right">
                    <span class="text-16 ml-6 pt-2">{{ cropText(memberDetail.username, 6) }}</span>
                </el-tooltip>
            </template>
            <template v-else>
                <span class="text-16 ml-6 pt-2">{{ memberDetail.username }}</span>
            </template>
        </div>
    </div>
    <!-- 右侧 其他信息 -->
    <div class="member-detail-right py-8 box-border flex-col flex-between-box flex-1 h-full px-30 text-16">
        <div class="flex-between-items-box line-bottom pb-12 pt-6">
            <div>会员卡号: {{ memberDetail.memberCardId }}</div>
            <div class="flex-items-box">
                <i class="iconfont icon-huiyuanka-my mr-4"/>
                {{ memberDetail.memberLevelName }}
            </div>
        </div>
        <div class="flex-between-items-box text-14">
            <div class="w-1/2">
                <div>手机号：{{ memberDetail.userPhone }}</div>
                <div class="mt-14">身份证号：{{ memberDetail.memberID }}</div>
            </div>
            <div class="w-1/2">
                <div>加入时间：{{ memberDetail.enterTime }}</div>
                <div class="mt-14">生日：{{ memberDetail.birthday }}</div>
            </div>
        </div>
        <!-- 可执行操作 -->
        <div class="flex-between-box items-end">
            <div>
                <el-button type="primary" round @click="toPage">
                    <Icon name="View" class="mr-6" :size="14"/>查看
                </el-button>
                <!-- 删除 -->
                <el-popconfirm @confirm="confirmDelete" title="该会员所有数据将一并清除，是否确认删除？">
                    <template #reference>
                        <el-button round>
                            <Icon name="Delete" class="mr-6" :size="14"/>删除
                        </el-button>
                    </template>
                </el-popconfirm>
            </div>
            <!-- 会员状态 -->
            <el-tooltip effect="dark" :content="MemberStatusEnum[memberDetail.memberStatus]" placement="left">
                <Icon
                    class="ml-8 cursor-pointer"
                    :size="24"
                    :style="{ color: MemberStatusColor[memberDetail.memberStatus]}"
                    :name="MemberStatusIconEnum[memberDetail.memberStatus]"
                />
            </el-tooltip>
        </div>
    </div>
</template>

<script setup lang="ts">
import { PropType } from 'vue'
import { useRouter } from 'vue-router'
import {
    httpDeleteMember, MemberDetailData, MemberStatusEnum, MemberStatusIconEnum
} from '@/api/module/memberManage'
import { cropText, ElMessages } from '@utils/methods'
import Icon from '@/components/Icon/index.vue'

const router = useRouter()

// 会员状态色
enum MemberStatusColor {
    /** @description 沉睡 */
    '#A9A9A9' = 1,
    /** @description 正常 */
    '#6EB33C' = 2,
    /** @description 活跃 */
    '#FF6900' = 3
}

const props = defineProps({
    memberDetail: {
        type: Object as PropType<MemberDetailData>,
        default: () => ({})
    }
})

const emit = defineEmits(['updateMemberList'])

// 删除会员
const confirmDelete = () => {
    httpDeleteMember({
        userId: props.memberDetail.userId
    }).then(({ success }) => {
        if (success) {
            ElMessages.success('该会员相关信息已清空！')
            emit('updateMemberList')
        } else {
            ElMessages.error('删除失败，请重试！')
        }
    })
}

// 查看会员详情
const toPage = () => {
    router.push({
        path: '/MemberManage/MemberDetail',
        query: {
            id: props.memberDetail?.userId
        }
    })
}
</script>

<style lang="less" scoped>
.member-detail-left{
    width: 150px;
    height: 170px;

    :deep(.el-image img){
        @apply rounded-full;
        width: 100px;
        height: 100px;
    }
}

.line-right{
    border-right: 1px solid #F1F1F1;
}

.member-detail-right{
    .line-bottom{
        border-bottom: 1px solid #F1F1F1;
    }

    .icon-huiyuanka-my {
        color: #E5A462;
        font-size: 22px;
    }
}
</style>
